<template>
    <div id="order">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="所有订单" name="-1"></el-tab-pane>
            <el-tab-pane label="未完成" name="0"></el-tab-pane>
            <el-tab-pane label="完成" name="1"></el-tab-pane>
            <el-tab-pane label="超时取消" name="2"></el-tab-pane>
            <el-tab-pane label="未发货" name="3"></el-tab-pane>
            <el-tab-pane label="申请退款" name="4"></el-tab-pane>
            <el-tab-pane label="已发货" name="5"></el-tab-pane>
            <el-tab-pane label="退款成功" name="6"></el-tab-pane>
        </el-tabs>
        <div class="adress">
            <router-link :to="{name:'OrderAdress'}">
              <span>
                我的收获地址
              </span>
            </router-link>
        </div>
         <el-table ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            type=index>
            <el-table-column prop="goodsName" label="商品名称" fixed width="150"></el-table-column>
            <el-table-column width="100" prop="name" label="商品图">
                <template slot-scope="scope">
                <img @click="detailFun(scope.row.goodsId)" class="goodsImg" :src="scope.row.goodsSurfaceimg?scope.row.goodsSurfaceimg:'../../../assets/img/errorImg.png'" :onerror="errorImage" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="orderPrice" label="价格" ></el-table-column>
            <el-table-column prop="goodsNumber" label="数量" ></el-table-column>
            <el-table-column prop="orderTime" label="时间" width="150" ></el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    {{orderState[scope.row.state]}}
                </template>
            </el-table-column>
            <el-table-column prop="addressMessage" label="订单信息" width="150"></el-table-column>
            <el-table-column prop="orderId" label="订单号" width="150"></el-table-column>
            <el-table-column label="操作" width="200px" fixed="right">
                <template slot-scope="scope">
                <button class="control-btn detail" @click="openFeedback(scope.row.orderId)">反馈</button>
                <button v-show="reFundBtn(scope.row.state)" class="control-btn detail" @click="refundFun(scope.row.orderId)">申请退款</button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageControl">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-size="10"
            layout="prev, pager, next"
            :total="total">
            </el-pagination>
        </div>
         <el-dialog title="订单反馈" :visible.sync="dialogFormVisible">
          <div class="feedbackWin">
              <p>请输入反馈信息：</p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="feedback">
              </el-input>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitFeedback()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: '-1',
      total: 0,
      current_page: 1,
      tableData: [],
      orderState: ['未完成', '完成', '超时取消', '未发货', '申请退款', '已发货', '退款成功'],
      errorImage: 'this.src="' + require('../../../assets/img/errorImg.png') + '"',
      preState: -1,
      dialogFormVisible: false,
      feedback: ''
    }
  },
  methods: {
    reFundBtn (key) {
      console.log(key)
      if (key === 3 || key === 5 || key === 1) {
        return true
      } else {
        return false
      }
    },
    handleClick (tab) {
      this.preState = tab.index - 1
      this.getData()
    },
    getData () {
      if (this.preState === -1) {
        this.preState = null
      }
      console.log(this.preState)
      this.$axios({
        method: 'get',
        url: '/Menu/User/queryOrderByPage',
        params: {
          pageStart: this.current_page,
          pageSize: 10,
          state: this.preState
        },
        headers: {
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiMSIsImV4cCI6MTY0NjgzMzc1MywiaWF0IjoxNjQ2MjI4OTUzLCJ1c2VySWQiOiIxIn0.1zIvB66c0qVrC4PzjquzWSciODBsvxVifswc1MhcUrE'
        }
      }).then(data => {
        console.log(data.data)
        if (data.data.code === 200) {
          console.log(data.data.object.list)
          this.tableData = data.data.object.list
          this.current_page = data.data.object.prePage + 1
          this.total = data.data.object.total
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.current_page = val
      this.getData()
    },
    delOrder (key) {
      console.log(key)
    },
    detailFun (key) {
      console.log(key)
      this.$router.push({
        path: '/goodsDetails/' + key
      })
    },
    refundFun (orderId) {
      this.$confirm('是否申请退款?', '退款申请', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.$axios({
          method: 'get',
          url: '/Menu/Order/applyForRefund',
          params: {
            orderId
          }
        }).then(data => {
          console.log(data.data)
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '退款申请已提交，平台正在处理!'
            })
            this.getData()
          }
        }).catch(error => {
          console.log(error)
        })
      })
    },
    openFeedback (key) {
      this.orderId = key
      this.dialogFormVisible = true
    },
    submitFeedback () {
      console.log(this.orderId)
      if (this.feedback.trim() === '') {
        this.$message({
          type: 'info',
          message: '请输入您要反馈的信息'
        })
      } else {
        this.$axios({
          method: 'post',
          url: '/Menu/User/sendMessage',
          params: {
            question: this.feedback,
            type: 0,
            extendId: this.orderId
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '您的反馈已提提交至平台，请耐心等待'
            })
            this.dialogFormVisible = false
            this.feedback = ''
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="less">
#order{
    width: 1000px;
    margin: 80px auto;
    .adress{
        display: block;
        text-align: right;
        margin: 20px 0;
        height:50px;line-height: 50px;
        background-color: rgba(0,0,0, 0.2);
        color: #fff;
        span{
            color: #fff;
            &:hover{
                color: #FF4329
            }

        }
    }
}
.pageControl{
    text-align: center;
    margin: 20px 0;
    li{
        &:hover{
            color: #FF4329 !important
        }
    }
}
.goodsImg{
    width: 80px;
    height: 80px;
}
.feedbackWin{
  width: 80%;
  margin: 0  auto;
  p{
    height: 40px;
    line-height: 40px;
  }
}
.control-btn{
  cursor: pointer;
}
</style>
